<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <!-- 编码 -->
    <meta charset="UTF-8">
    <!-- 作者 -->
    <meta name="author" content="大触紫衣(WisteriaZy)" />
    <!-- 简介 -->
    <meta name="description" content="大触紫衣的个人博客。" />
    <!-- 图标 -->
    <link rel="icon" href="img/铃铛.png" type="image/png" />
    <!-- 确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。 -->
    <meta name="viewport" content="width=device-width" />
    <!-- 标题 -->
    <title>光掠过的痕迹</title>
    <!-- 引用CSS -->
    <link rel="stylesheet" href="css/index.css" />
    <!-- <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css"> -->

</head>

<body>
    <a href="index.html" title="前往主页">
        <img src="img/铃铛.png" alt="前往主页" />
    </a>
    <h1>这里是主页的<span>span element</span>大标题</h1>
    <a href="#di">跳转到底部</a>
    <h2>第二级<em>标题</em></h2>
    <!-- <script src="./js/main.js" defer></script> -->
    <a href="html/favorites_2024_2_23.html" target="_blank">书签</a>
    <p>以下是一个列表</p>
    <ul>
        <li>一</li>
        <li>二</li>
        <li><em>三</em></li>
    </ul>
    <p>t5igue;luorhl;ourhg;ouahrguharlgugarljbfajrbgbalurgbavbharlgnalurhgrughpabrlguabrurlughwel;uhgwuhg;lquhrgloqhrgp;ug;uhgpqrg;fn;ahr;gb;woih;puqg;br;qugbg;qiufb;iuabliguhreg;oqhrguhqave;urgbluhvpbrp;ugh;ujgb;apuvharpugawgjbquergvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    </p>
    <a href="About.html">关于</a>
    <p></p>
    <a href="index.html" download="主页.html">下载网页</a>
    <ul>
        <li>导航菜单</li>
        <li><a href="index.html" title="前往主页">主页</a></li>
        <li><a href="About.html" title="前往关于页面">关于</a></li>
    </ul>
    <a href="mailto:dczyxnfs@qq.com">向大触紫衣发邮件</a>
    <dl>
        <dt>描述列表示例</dt>
        <dd>
            戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
        </dd>
        <dt>语言独白</dt>
        <dd>
            戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
        </dd>
        <dt>旁白</dt>
        <dd>
            戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
        </dd>
    </dl>
    <p>这里是个引用:</p>
    <blockquote cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
        <p>
            The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
            <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
            an extended quotation.
        </p>

    </blockquote>
    <p>
        我们使用
        <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr>
        来组织网页文档。
    </p>

    <p>
        我是<abbr title="大触紫衣(WisteriaZy)">dczy</abbr>，这是一个缩写示例。
    </p>
    <p>地址示例</p>
    <address>
        <p>
            China<br />
            某省<br />
            某市<br />
            某村
        </p>

        <ul>
            <li>电话: 114514 1919810</li>
            <li>邮箱: dczyxnfs@qq.com</li>
        </ul>

    </address>
    <p>上下标示例</p>
    <p>
        咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
    </p>
    <p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

    <p>代码块示例</p>
    <pre><code>const para = document.querySelector('p');

        para.onclick = function() {
          alert('噢，噢，噢，别点我了。');
        }</code></pre>

    <p>
        请不要使用 <code>&lt;font&gt;</code> 、
        <code>&lt;center&gt;</code> 等表象元素。
    </p>

    <p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>

    <p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

    <pre>$ <kbd>ping mozilla.org</kbd>
        <samp>PING mozilla.org (63.245.215.20): 56 data bytes
        64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
    <p>时间日期示例</p>
    <p>标准简单日期</p>
    <time datetime="2016-01-20">20 January 2016</time>
    <p>只包含年份和月份</p>
    <time datetime="2016-01">January 2016</time>
    <p>只包含月份和日期</p>
    <time datetime="01-20">20 January</time>
    <p>只包含时间，小时和分钟数</p>
    <time datetime="19:30">19:30</time>
    <p>还可包含秒和毫秒</p>
    <time datetime="19:30:01.856">19:30:01.856</time>
    <p>日期和时间</p>
    <time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
    <p>含有时区偏移值的日期时间</p>
    <time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
    <p>提及特定周</p>
    <time datetime="2016-W04">The fourth week of 2016</time>

    <p id="di">我是底部</p>
</body>

</html>